<template>
  <div class="space-y-8">
    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <motion-div
        :initial="{ opacity: 0, y: 20 }"
        :animate="{ opacity: 1, y: 0 }"
        class="bg-white rounded-xl shadow-sm p-6"
      >
        <Plotly
          :data="progressData"
          :layout="progressLayout"
          :config="progressConfig"
          class="w-full"
        />
      </motion-div>

      <motion-div
        :initial="{ opacity: 0, y: 20 }"
        :animate="{ opacity: 1, y: 0 }"
        class="bg-white rounded-xl shadow-sm p-6"
      >
        <Plotly
          :data="masteryData"
          :layout="masteryLayout"
          :config="progressConfig"
          class="w-full"
        />
      </motion-div>
    </div>

    <!-- 学习建议区域 -->
    <motion-div
      :initial="{ opacity: 0, y: 20 }"
      :animate="{ opacity: 1, y: 0 }"
      class="bg-white rounded-xl shadow-sm p-6"
    >
      <h3 class="text-lg font-semibold mb-4">个性化学习建议</h3>
      <div class="space-y-4">
        <div 
          v-for="rec in recommendations"
          :key="rec.id"
          class="flex items-start space-x-4 p-4 bg-blue-50 rounded-lg"
        >
          <div class="flex-1">
            <h4 class="font-medium text-blue-900">{{ rec.title }}</h4>
            <p class="text-sm text-blue-700 mt-1">{{ rec.description }}</p>
            <div class="mt-2 flex flex-wrap gap-2">
              <div 
                v-for="(feature, index) in rec.features"
                :key="index"
                class="text-xs bg-white px-2 py-1 rounded-full text-blue-600"
              >
                {{ feature.type }}: {{ Math.round(feature.value * 100) }}%
              </div>
            </div>
          </div>
          <div class="text-sm text-blue-600 font-medium">
            推荐度: {{ Math.round(rec.confidence * 100) }}%
          </div>
        </div>
      </div>
    </motion-div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
// import { Plotly } from 'vue3-plotly';
// import { motion } from 'framer-motion';

// const motionDiv = motion('div');

const props = defineProps({
  userId: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    required: true,
    validator: (value) => {
      return (
        Array.isArray(value.dates) &&
        Array.isArray(value.correctRates) &&
        Array.isArray(value.topics) &&
        value.topics.every(t => 'name' in t && 'mastery' in t)
      );
    }
  }
});

// 模拟推荐数据（实际项目中可以替换为API调用）
const recommendations = computed(() => [
  {
    id: '1',
    title: '加强几何证明练习',
    description: '根据您的学习记录，几何证明是您需要重点提升的领域',
    confidence: 0.85,
    features: [
      { type: '相似度', value: 0.92 },
      { type: '难度匹配', value: 0.78 }
    ]
  },
  {
    id: '2',
    title: '巩固函数基础知识',
    description: '函数图像分析的正确率有待提高，建议从基础概念开始复习',
    confidence: 0.72,
    features: [
      { type: '相似度', value: 0.85 },
      { type: '难度匹配', value: 0.65 }
    ]
  }
]);

// 图表配置
const progressConfig = {
  displayModeBar: false,
  responsive: true
};

// 进度图表布局
const progressLayout = computed(() => ({
  title: '学习进度趋势',
  showlegend: false,
  height: 300,
  margin: { t: 40, r: 20, l: 40, b: 40 },
  paper_bgcolor: 'transparent',
  plot_bgcolor: 'transparent',
  xaxis: {
    showgrid: false,
    zeroline: false
  },
  yaxis: {
    showgrid: true,
    zeroline: false,
    range: [0, 100]
  }
}));

// 掌握度图表布局
const masteryLayout = computed(() => ({
  title: '知识点掌握度',
  showlegend: false,
  height: 300,
  margin: { t: 40, r: 20, l: 120, b: 40 },
  paper_bgcolor: 'transparent',
  plot_bgcolor: 'transparent',
  xaxis: {
    showgrid: true,
    zeroline: false,
    range: [0, 100]
  },
  yaxis: {
    showgrid: false,
    zeroline: false
  }
}));

// 进度图表数据
const progressData = computed(() => [{
  x: props.data.dates,
  y: props.data.correctRates,
  type: 'scatter',
  mode: 'lines+markers',
  line: {
    color: '#3B82F6',
    width: 2
  },
  marker: {
    color: '#3B82F6',
    size: 6
  }
}]);

// 掌握度图表数据
const masteryData = computed(() => [{
  x: props.data.topics.map(t => t.mastery * 100),
  y: props.data.topics.map(t => t.name),
  type: 'bar',
  orientation: 'h',
  marker: {
    color: props.data.topics.map(t => `rgba(59, 130, 246, ${t.mastery})`),
  }
}]);
</script>

<style scoped>
/* 自定义样式 */
</style>
